import * as React from 'react';
import { DatePicker, Form, Button, Icon, Select, Drawer, Card, notification } from 'antd';
import useTimeController from '../../../hook/timeController';
import dayjs from 'dayjs';
import { DateInput } from '../../../component/rangeDateInput';
import SpeedTable from '../../../component/speedTable';
import { speed } from '../../../hook/common';
import { deltaMinuteIsValid } from '../util';
import api from '../../../common/api';
import './index.less';

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
    },
};

const {
    useState,
    useEffect
} = React;


interface RealTimeChartProps {
    selectProjectId: number,
}


export default function RealTimeChart(props: RealTimeChartProps) {
    const start = dayjs().add(-4, 'hour'), end = dayjs();
    const startDateController = useTimeController(start);
    const endDateController = useTimeController(end);
    const [loading, setLoading] = useState(true);
    const [timeGranularity, setTimeGranularity] = useState('1分钟');
    const [statics, setStatics] = useState([]);
    function setSelectTimeGranularity(option) {
        setTimeGranularity(option);
    }

    async function handlerSumbit() {
        const startDate = startDateController.getTime();
        const endDate = endDateController.getTime();
        const deltaMinute = (endDate - startDate) / 1000 / 60;
        if (!deltaMinuteIsValid(deltaMinute)) {
            return;
        }
        setLoading(true);
        const data = await api({
            method: 'GET',
            url: `speed-server/${props.selectProjectId}/static`,
            params: {
                startDate: startDateController.getTime(),
                endDate: endDateController.getTime(),
            }
        }) as any;
        setLoading(false);
        setStatics(data);
    }

    useEffect(() => {
        handlerSumbit();
    }, [props.selectProjectId, startDateController.getTime(), endDateController.getTime()]);

    return (
        <div className="realtime-select">
            <div className="time-select-warpper">
                <span> 时间范围： </span>
                <DateInput controller={startDateController} time={start}></DateInput>
                <span className="gap-syboml"> ~ </span>
                <DateInput controller={endDateController} time={end}></DateInput>
            </div>
            <div className="time-granularity-select">
                <span> 时间粒度： </span>
                <Select
                    value={timeGranularity}
                    onSelect={setSelectTimeGranularity}
                    filterOption={(input, option: any) =>
                        option.props.value.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                        option.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    style={{ width: 100, marginRight: 20 }}
                >
                    {
                        ['1分钟', '5分钟', '1小时'].map((item) => {
                            return (
                                <Select.Option key={item.toString()} value={item} title={item}>
                                    {item}
                                </Select.Option>
                            )
                        })
                    }
                </Select>
            </div>
            <div className="chart-content">
                <SpeedTable timeGranularity={timeGranularity} statics={statics} speedLoading={loading}></SpeedTable>
            </div>
        </div>
    )
}